<template>
  <div class="container">
    <div class="cont-bg">
      <img class="bg" src="@/assets/bg_pirse.png">
      <div v-if="list.length<=0" class="miva-jiang">
        <div>~QAQ~</div>
        <div>您当前还未中奖哦~</div>
      </div>
    </div>

    <div class="scroll-info">
      <itemCard v-for="(temp,index) in list" :key="index" :temp="temp" />
    </div>

    <copy />
  </div>
</template>
<script>
import { userPrize } from '@/api/utils'
import itemCard from './item-card'
import copy from '@/components/layer/copy'
export default {
    components: { itemCard, copy },
    data() {
        return {
            list: []
        }
    },
    async created() {
        const res = await userPrize({})
        console.log(res)
        this.list = res.data

        console.log(process.env.NODE_ENV)
        if (process.env.NODE_ENV === 'development') {
            if (confirm('要查看中奖数据嘛?') === true) {
                const arr = []
                for (let i = 0; i < 3; i++) {
                    arr.push({
                        id: i, // 奖品ID
                        prize_num: '奖品编号' + i, // 奖品编号
                        is_use: 0, // 是否使用（1：使用，0是未使用）
                        prize_level: i, // 1：一等奖，2：二等奖，3：三等级
                        prize: i + '号测试奖品', // 奖品名称
                        rule: i + '奖品使用规则', // 奖品使用规则
                        nickname: i + '商家名称', // 商家名称
                        address: i + '商家地址', // 商家地址
                        start_time: '20:46:16', // 营业开始时间
                        end_time: '20:46:18' // 营业结束时间
                    })
                }
                this.list = arr
            } else {
                this.list = []
            }
        }
    }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: calc(100vh - 45px);
  position: relative;
  overflow: hidden;
  .cont-bg {
    width: 100%;
    position: absolute;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .bg {
    width: 100%;
  }
  .miva-jiang {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color:#fff;
  }
  .scroll-info {
    height: calc(100vh - 45px - 30vw);
    padding-bottom: 100px;
    box-sizing: border-box;
    position: absolute;
    top: 16vw;
    overflow-y: scroll;
  }
}
</style>
